<!DOCTYPE html>
<html>
<head>
{#    <meta charset="UTF-8">#}
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script type="text/javascript" src="{{url_for('static',filename='js/echarts.min.js')}}"></script>
{#    <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>#}
    <script type="text/javascript" src="{{url_for('static',filename='js/jquery.min.js')}}"></script>
{#    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>#}
        <script src="{{url_for('static',filename='js/bootstrap.min.js')}}"></script>
	<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
    <link rel="stylesheet" href="{{url_for('static',filename='css/bootstrap.min.css')}}">

    <title>全策略历史收益</title>
    <style>
        body {margin:0}
        p{margin:7px auto}
    </style>
</head>
<body>
        <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">盯盘宝后台管理系统</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li ><a href="{{ url_for('start_web') }}">首页</a></li>
            <li ><a href="{{ url_for('permission_manage') }}">权限配置</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    管理员{{ session['admin'] if session['admin'] else "未登录" }}
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="{{ url_for("login_out") }}">退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
<div >
<div id="historyProfit" style="width: 200px;height:200px;border:1px solid;display:inline-block;">
</div>
<div id ="totalProfit" style="width:50px;height:200px;border:1px solid;position: absolute; display:inline-block;">

</div>
</div>
<script type="text/javascript" >
// 基于准备好的dom，初始化echarts实例
var historyProfitChart = echarts.init(document.getElementById('historyProfit'));
var dateList = [];
var profitList = [];
var szzsList = [];
var netValue = null;
var totalProfit = null;
var monthTotalProfit = null;
var dayTotalProfit = null;


function addData(){
        $.ajax({
            url: "/historyProfitData?account={{ account }}", async: true, success: function (data) {
                    var obj = JSON.parse(data);
                    dateList = obj.dateList;
                    profitList =obj.profitList;
                    szzsList = obj.szzsList;
                    netValue = obj.netValue;
                    totalProfit =obj.totalProfit;
                    monthTotalProfit = obj.monthTotalProfit;
                    dayTotalProfit = obj.dayTotalProfit;

                    refreshEchart();

            }
        });

    }

function refreshEchart(){

    historyProfitChart.setOption({
        title: {
                text: '全策略历史收益',
                textStyle:{
                    fontSize:13
                }
            },
        tooltip: {trigger: 'axis',
                    textStyle:{
                        align:'right'
                    },
                    position: function(point, params, dom, rect, size){
                        //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
                        var x = point[0];//
                        var y = point[1];
                        var viewWidth = size.viewSize[0];
                        var viewHeight = size.viewSize[1];
                        var boxWidth = size.contentSize[0];
                        var boxHeight = size.contentSize[1];
                        var posX = 0;//x坐标位置
                        var posY = 0;//y坐标位置

                        if(x<boxWidth){//左边放不开
                            posX = 5;
                        }else{//左边放的下
                            posX = x-boxWidth;
                        }

                        if(y<boxHeight){//上边放不开
                            posY = 5;
                        }else{//上边放得下
                            posY = y-boxHeight;
                        }

                        return [posX,posY];
                 }
        },
        legend:{data:['总收益','上证指数'],y:'bottom'},
        xAxis: {
            data: dateList,
            axisLabel:{
                textStyle:{
                    fontSize:8
                }
            }
        },
        yAxis: {
            axisLabel:{
                textStyle:{
                    fontSize:8
                }
            }
        },
        series:[
            {name:'总收益',
            type:'line',
            data:profitList},

            {name:'上证指数',
            type:'line',
            data: szzsList}

        ]
    });
    var date = new Date();

    var month = date.getMonth() + 1;//月

    if (totalProfit >=0){
        var html_str = "<div ><p align='center' style='font-size:12px;'>" + "总收益:</p><p align='center' style='color:red;font-size:12px;'>"+ totalProfit +  " %</p>";
    }else{
        var html_str = "<div ><p align='center' style='font-size:12px;'>" + "总收益:</p><p align='center' style='color:blue;font-size:12px;'>"+ totalProfit +  " %</p>";
    }
    if (monthTotalProfit >= 0){
        html_str += "<p align='center' style='font-size:12px;'>" + month +"月收益:</p><p align='center' style='color:red;font-size:12px;'>"+ monthTotalProfit +  " %</p>";
    }else{
        html_str += "<p align='center' style='font-size:12px;'>" +month + "月收益:</p><p align='center' style='color:blue;font-size:12px;'>"+ monthTotalProfit +  " %</p>";
    }
    if (dayTotalProfit >=0){
        html_str += "<p align='center' style='font-size:12px;'>" + "昨日收益:</p><p align='center' style='color:red;font-size:12px;'>"+ dayTotalProfit +  " %</p>";
    }else{
        html_str += "<p align='center' style='font-size:12px;'>" + "昨日收益:</p><p align='center' style='color:blue;font-size:12px;'>"+ dayTotalProfit +  " %</p>";
    }
    html_str += "<p align='center' style='font-size:12px;'>" + "净值:</p><p align='center' style='color:red;font-size:12px;'>"+ netValue +  "</p></div>";
    $('#totalProfit').append(html_str);
}

addData();

</script>

</body>
</html>